<template>
    <div class="flex-main">
        <div class="flex-body">
            <p class="p1">我的地址</p>
            <no-data v-if="addresslist.length<1"></no-data>
            <ul class="m-addslist" v-else>
                <li v-for="(item,index) in addresslist" :key="index" data-index="index"
                @touchstart="touchstart" @touchend="touchend"
                @touchmove="touchmove($event,index)" :class="{'infinity':addrIdx==index}">
                    <addr-item class="m-addritem " :addr="item" @click.native="backPayment(item)"></addr-item>
                    <span class="m-del" @click="delEvent(index)">删除</span>
                </li>
                
            </ul>
        </div>
        <div class="flex-bottom">
            <div class="m-bottom-btn">
                <button @click="toAddressEdit">+ 添加地址</button>
            </div>
        </div>
    </div>
</template>
<script>
import {addressList,delAddress} from '@/api/mine';
import { error } from 'util';
import { setTimeout } from 'timers';
import {mapState,mapMutations,mapActions} from 'vuex';
export default {
    name:'',
    data() {
        return {
            isDef:0,            //1 从付款页面跳转过来
            addrIdx:null,
            startX:null,
            addresslist:[],
        }
    },
    components:{
        addrItem:()=>import('@/model/mine/addrItem'),
    },
    methods: {
        ...mapActions(['actionAddrCon','actionChooseAddr']),
        // 获取地址列表
        getAddresslist() {
            let that = this;
            addressList({
                CustomerId:'0091001709'
            }).then(result=>{
                that.addresslist = result;
            }).catch(error=>{})
        },
        touchstart(e) {
            let changedTouches = e.changedTouches[0];
            let pageX = changedTouches.pageX;
            this.startX = pageX;
        },
        touchend(e) {
            let changedTouches = e.changedTouches[0];
            let pageX = changedTouches.pageX;
            let defX = pageX-this.startX;
            if(defX>0) {
                // 右移
                this.addrIdx = null;
            }else{
                // 左移
            }
        },
        touchmove(e,index) {
            let changedTouches = e.changedTouches[0];
            let pageX = changedTouches.pageX;
            let pageY = changedTouches.pageY;
            this.addrIdx = index;
        },
        // 删除记录
        delEvent(index) {
            let that = this;
            let addresslist = that.addresslist;
            that.$messagebox.confirm('确定删除').then(res=>{
                // 确定
                console.log(res);
                let addrParam = {
                    CustomerId:'0091001709',
                    State:addresslist[index].State,
                    Id:addresslist[index].Id
                }
                delAddress(addrParam).then(result=>{
                    that.$toast('地址删除成功');
                    setTimeout(()=>{
                        addresslist.splice(index,1);        //数组删除对应数据
                        that.addresslist = addresslist;
                        that.addrIdx = null;
                    },300);
                    
                })
            }).catch(err=>{
                // 取消
                console.log(err);
            })
        },
        // 去编辑地址
        toAddressEdit() {
            this.$router.push({name:'addressEdit'});
        },
        backPayment(data){
            if(this.isDef=='1'){
                this.actionChooseAddr(data);
                this.$router.go(-1);
            }else{
            }
        },
    },
    mounted() {
        let isDef = this.$route.query.isDef;
        this.isDef = isDef;
        this.getAddresslist();
    }
}
</script>
<style lang="less" scoped src="@/less/mine/address.less"></style>
